<template>
	<div class="login-container">
		<el-form class="login-form" ref="loginFormRef" :model="loginForm" :rules="loginRules">
			<div class="title-container">
				<h3 class="title">{{$t('msg.login.title')}}</h3>

				<lang-select class="lang-select"></lang-select>
			</div>

			<el-form-item prop="username">
				<span class="svg-container">
					<svg-icon icon="user" />
				</span>
				<el-input placeholder="username" name="username" type="text" v-model="loginForm.username" />
			</el-form-item>

			<el-form-item prop="password">
				<span class="svg-container">
					<svg-icon icon="password"></svg-icon>
				</span>
				<el-input :type="passwordType" v-model="loginForm.password" placeholder="password" name="password">
				</el-input>
				<span class="show-pwd">
					<span @click="onChangePwdType" class="svg-container">
						<svg-icon :icon="passwordType === 'password' ?'eye':'eye-open' "></svg-icon>
					</span>
				</span>
			</el-form-item>

			<el-button type="primary" style="width: 100%; margin-bottom: 30px" :loading="loading" @click="handleLogin">
				{{$t('msg.login.loginBtn')}}
			</el-button>
			<div class="tips" v-html="$t('msg.login.desc')"></div>
		</el-form>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		validatePassword
	} from './rules'
	import {
		useStore
	} from 'vuex'

	import {
		useI18n
	} from 'vue-i18n'

	import LangSelect from '@/components/LangSelect'

	const i18n = useI18n()

	// 数据源
	const loginForm = ref({
		username: 'super-admin',
		password: '123456'
	})

	const msg = i18n.t('msg.login.usernameRule')

	// 验证规则
	const loginRules = ref({
		username: [{
			required: true,
			trigger: 'blur',
			message: i18n.t('msg.login.usernameRule')
		}],
		password: [{
			required: true,
			trigger: 'blur',
			validator: validatePassword()
		}]
	})

	// 处理密码框文本显示状态
	const passwordType = ref('password')
	const onChangePwdType = () => {
		if (passwordType.value === 'password') {
			passwordType.value = 'text'
		} else {
			passwordType.value = 'password'
		}
	}

	// 登录动作处理
	const loading = ref(false)
	const loginFormRef = ref(null)
	const store = useStore()
	const handleLogin = () => {
		
		loginFormRef.value.validate(valid => {
			if (!valid) return

			loading.value = true
			store
				.dispatch('user/login', loginForm.value)
				.then(() => {
					loading.value = false
				})
				.catch((err) => {
					console.log(err)
					loading.value = false
				})
		})
	}
</script>

<style lang="scss" scoped>
	$bg: #2d3a4b;
	$dark_gray: #889aa4;
	$light_gray: #eee;
	$cursor: #fff;

	.login-container {
		min-height: 100%;
		width: 100%;
		background-color: $bg;
		overflow: hidden;

		.login-form {
			position: relative;
			width: 520px;
			max-width: 100%;
			padding: 160px 35px 0;
			margin: 0 auto;
			overflow: hidden;

			:deep .el-form-item {
				border: 1px solid rgba(255, 255, 255, 0.1);
				background: rgba(0, 0, 0, 0.1);
				border-radius: 5px;
				color: #454545;
			}

			:deep .el-input {
				display: inline-block;
				height: 47px;
				width: 85%;
				--el-input-focus-border-color: none;
				--el-input-border-color: none;
				--el-input-hover-border-color: none;

				.el-input__wrapper {
					width: 100%;
					background: transparent;
					border: none;
					appearance: none;
					border-radius: 0px;
					padding: 12px 5px 12px 15px;
					color: $light_gray;
					height: 47px;
					caret-color: $cursor;
				}
			}
		}

		.tips {
			font-size: 16px;
			color: white;
			line-height: 24px;
		}

		.svg-container {
			padding: 8px 5px 0px 15px;
			color: $dark_gray;
			vertical-align: middle;
			display: inline-block;
			box-sizing: border-box;
		}

		.title-container {
			position: relative;

			.title {
				font-size: 26px;
				color: $light_gray;
				margin: 0px auto 40px auto;
				text-align: center;
				font-weight: bold;
			}
		}

		.show-pwd {
			position: absolute;
			right: 10px;
			top: 10px;
			font-size: 16px;
			color: $dark_gray;
			cursor: pointer;
			user-select: none;
		}

		:deep .lang-select {
			position: absolute;
			top: 10px;
			right: 0;
			background-color: #fff;
			font-size: 22px;
			padding: 4px;
			border-radius: 4px;
			cursor: pointer;
		}
	}
</style>
